<!DOCTYPE html>
<html>
<head>
  <script src="../node_modules/angular/angular.js"></script>
  <style>
    .strike {
      text-decoration: line-through;
    }
  </style>
</head>
<body ng-app="todoApp">
  <div ng-controller="todoController">
    <todo-header></todo-header>
    <todo-body></todo-body>
    <todo-footer></todo-footer>
  </div>
  <script>
    angular.module('todoApp', [])
      .filter('doneCount', function() {
        return function(arr) {
          return arr.filter(item => item.checked).length;
        };
      })
      .directive('todoHeader', function() {
        return {
          template: [
            `<section>`,
            `<input type="text" ng-model="curItem.content" ng-keyup="$event.keyCode === 13 && addItem()">`,
            `<button ng-click="addItem()">Add</button>`,
            `</section>`,
          ].join(''),
        }
      })
      .directive('todoBody', function() {
        return {
          template: [
          `<section>`,
            `<ul>`,
              `<li ng-repeat="item in todoList">`,
                `<input type="checkbox" ng-model="item.checked" id="{{'id-' + $index}}">`,
                `<label for="{{'id-' + $index}}" ng-class="{strike: item.checked}">{{ item.content }}</label>`,
              `</li>`,
            `</ul>`,
          `</section>`,
          ].join(''),
        }
      })
      .directive('todoFooter', function() {
        return {
          template: [
            `<section>`,
            `<p>done: {{ todoList | doneCount }}</p>`,
            `</section>`,
          ].join(''),
        }
      })
      .controller('todoController', function($scope) {
        $scope.curItem = { content: '', checked: false };
        $scope.todoList = [{ 
          content: 'write a doc',
          time: new Date().toLocaleString()
        }];

        $scope.addItem = function() {
          $scope.todoList.push({
            ...$scope.curItem,
            checked: false,
            time: new Date().toLocaleString()
          });
          $scope.curItem.content = ''
        }
      })
  </script>
</body>
</html>